<template>
  <div>
    <div
      class="dialog_wrap ruxue_dialog"
      id="dialog_xx"
      :style="'display: ' + $store.state.pcblock + ';'"
    >
      <div class="ruxuebaoming_main" style="height: 460px">
        <p class="title">
          请选择入学区域<span
            class="floatright login_load_close"
            @click="dialogHide()"
            >X</span
          >
        </p>
        <div class="main">
          <div class="area_wrap">
            <p class="area_title">中心城区（内六区）</p>
            <a
              class="ml15"
              v-for="(item, index) in countiesData"
              :key="index"
              @click="toIndexElementary(item.countiesId)"
              >{{ item.countiesName }}</a
            >
          </div>
          <div class="area_wrap">
            <p class="area_title">四县（市、区）</p>
            <a href="#" onclick="showMsg2()">望城区</a>
            <a
              href="#"
              onclick="goUrl('/index_elementary?area=430121000000')"
              class="ml30"
              >长沙县</a
            >
            <!--<a href="#" onclick="layer.alert('本年度报名未开始',{icon:0})" class="ml30">长沙县</a>-->
            <br />
            <a href="#" onclick="showMsg2()">浏阳市</a>
            <a href="#" onclick="showMsg2()" class="ml30">宁乡市</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import counties from "@/api/counties.js";

export default {
  name: "PrimaryCounties",

  data() {
    return {
      countiesData: {},
    };
  },

  mounted() {
    this.getSelectsCountiesInfo();
  },

  methods: {
    /**
     * 取消新生入学报名选区的对话框
     */
    dialogHide() {
      this.$store.commit("updatePC", "none");
      console.log("primarycounties:", this.$store.state.pcblock);
    },
    /**
     * 跳转到报名
     */
    toIndexElementary(countiesId) {
      this.$store.commit("updatePC", "none");
      this.$router.replace({ path: `/index_elementary.html/1/${countiesId}` });
    },
    /**
     * 获取县区信息
     */
    getSelectsCountiesInfo() {
      counties
        .selects()
        .then((res) => {
          console.log("response:", res);
          let data = res.data;
          if (data.ok) {
            this.countiesData = data.data.data;
          } else this.$message.error("查询小学县区名失败");
          console.log("countiesData", this.countiesData);
        })
        .catch((err) => {
          console.log("err:", err);
        });
    },
  },
};
</script>

<style scoped>
.area_wrap {
  padding: 20px;
  text-align: center;
}
.area_title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 10px;
}

.area_wrap .ml15 {
  margin-left: 40px;
}

.area_wrap a {
  display: inline-block;
  width: 120px;
  height: 40px;
  line-height: 40px;
  font-size: 18px;
  text-align: center;
  border-radius: 5px;
  background: #148dd7;
  margin-top: 20px;
  color: #fff;
}
a:hover {
  cursor: pointer;
}
</style>